<template>
  <context-holder />
  <div class="topBox">
    <!-- //logo -->
    <div style="display: flex; align-items: center">
      <n-image
        style="margin-left: 30px"
        width="40"
        src="http://8.136.123.169:7777/31cff14d-8281-4476-808f-c8105c7e1923.jpg"
        preview-disabled
      />
      <div style="margin-left: 30px; font-size: 16px; font-weight: bold">
        xxx后台管理
      </div>
    </div>

    <!-- //中间空白 -->
    <div></div>
    <!-- //右边用户名,退出 -->
    <div style="margin-right: 30px">
      <span style="margin-right: 20px">小马</span>

      <n-popconfirm
        :show-icon="false"
        negative-text="取消"
        positive-text="确定"
        @positive-click="logout"
      >
        <template #trigger>
          <n-button>退出登录</n-button>
        </template>
        是否退出登录?
      </n-popconfirm>
    </div>
  </div>

  <!-- ========内容 -->
  <n-space vertical style="margin-top: 7vh">
    <n-layout has-sider>
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="whiteList.min"
        :width="whiteList.max"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
        style="height: 93vh"
      >
        <n-menu
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update:value="changePage"
          :render-label="renderMenuLabel"
          :render-icon="renderMenuIcon"
          :expand-icon="expandIcon"
        />
      </n-layout-sider>
      <n-layout style="width: 100vw; height: 93vh">
        <iframe
          :src="currentPage"
          style="width: 100%; height: 100%; border: none"
        ></iframe>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup lang="ts">
const userAgent = navigator.userAgent;
import { defineComponent, h, ref } from "vue";
import { NIcon } from "naive-ui";
import type { MenuOption } from "naive-ui";
import { log } from "console";
import { useNotification } from "naive-ui";
import { message } from "ant-design-vue";
import { useLoadingBar } from "naive-ui";
import { useRouter } from "vue-router";

let router = useRouter();

// 路由
const menuOptions: MenuOption[] = [
  {
    label: "用户管理",
    key: "dance-dance-dance",
    children: [
      {
        label: "用户列表",
        key: "/admin/example",
      },
      {
        label: "用户订单",
        key: "/admin/example2",
      },
    ],
  },
];

const collapsed = ref(false);
const currentPage = ref("");
let whiteList = ref<any>({
  min: 10,
  max: 240,
});

//自适应
if (/mobile/i.test(userAgent)) {
  console.log("当前设备为手机");
  //大小变为手机
  whiteList.value = {
    min: 10,
    max: 150,
  };
} else {
  console.log("当前设备为电脑");
  //大小变为电脑
  whiteList.value = {
    min: 10,
    max: 240,
  };
}

// const notification = useNotification(); // 引入通知
const [messageApi, contextHolder] = message.useMessage();

const logout = () => {
  // 执行登出逻辑，例如清除用户信息、跳转到登录页面
  console.log("用户已退出");
  // 显示通知
  messageApi.info("退出成功!");
  //跳转页面
  router.push("/admin/login");
};

//点击菜单
const changePage = (key) => {
  currentPage.value = key;
  //加载线
  loadingBar.start();
  setTimeout(() => {
    loadingBar.finish();
  }, 500);
};

const loadingBar = useLoadingBar();
</script>

<style lang="less">
.topBox {
  width: 100vw;
  height: 7vh;
  position: fixed;
  top: 0px;
  z-index: 99;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  // border-bottom: 1px solid gray;
  background-color: white;
  justify-content: space-between;
}
</style>
